<template>
  <div class="administrative-division">
    <a-layout class="division-layout">
      <a-layout-sider width="220" style="background: #fff">
        <a-layout class="division-sider-tree">
          <!-- 左侧导航栏头部区域 -->
          <a-layout-header
            class="division-title"
            style="background:#FFFFFF;border-bottom: 1px solid #e8e8e8;">
            <a-tooltip placement="right">
              <template #title>
                <span>{{ $t('core.model.routeTitle.division') }}</span>
              </template>
              {{ titleFilter($t('core.model.routeTitle.division')) }}
            </a-tooltip>
            <!-- 刷新行政区划树 -->
            <a-tooltip placement="right" :destroyTooltipOnHide="true" :mouseLeaveDelay="0">
              <template #title>
                <span>刷新行政区划树</span>
              </template>
              <sync-outlined
                  class="division-reload"
                  :spin="syncLoadDivision"
                  @mouseenter="syncLoadDivision = true"
                  @mouseleave="syncLoadDivision = false"
                  @click="reloadDivision"/>
            </a-tooltip>

          </a-layout-header>
          <a-layout-content>
            <div class="content-tree">
              <!-- 行政区划树 -->
              <division-tree ref="divisionTree" @selectChange="divisionSelect"></division-tree>
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout-sider>
      <a-layout>
        <a-layout-content
          class="division-table-content"
          :style="{ background: '#fff', minHeight: '280px' }">
          <!-- 行政区划子级表 -->
          <division-table
            ref="divisionTable"
            @editSubmit="editSubmit"
            @addSubmit="addSubmit"
            @removeSubmit="removeSubmit">
          </division-table>
        </a-layout-content>
      </a-layout>
    </a-layout>

  </div>
</template>

<script>
  import { SyncOutlined } from '@ant-design/icons-vue'
  import DivisionTable from '@/views/core/division/DivisionTable';
  import DivisionTree from '@/views/core/division/DivisionTree';
  export default {
    name: 'AdministrativeDivision',
    components: {
      DivisionTable,
      DivisionTree,
      SyncOutlined
    },
    data() {
      return {
        syncLoadDivision: false
      }
    },
    methods: {
      titleFilter (val) {
        return val.length > 8 ? val.substring(0,8) + '...' : val
      },
      // 点击某个行政区划树的节点
      divisionSelect (val) {
        this.$refs['divisionTable'].setData(val)
      },
      // 刷新行政区划树
      reloadDivision () {
        this.$refs['divisionTree'].refresh()
      },
      /**
       * 新增了行政区划回调
       * @param currentDivison 当前选中的行政区划
       * @param node 新增加的节点
       */
      addSubmit (currentDivison, node) {
        this.$refs['divisionTree'].refresh(1, node)
      },
      removeSubmit () {
        this.$refs['divisionTree'].refresh(2)
      },
      editSubmit (changeResNodes) {
        this.$refs['divisionTree'].refresh(3, changeResNodes)
      }
    }
  }
</script>

<style lang="less" scoped>
  .administrative-division{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    .division-layout {
      width: 100%;
      height: 100%;
      .division-sider-tree{
        height: 100%;
        border-right: 1px solid #e8e8e8;
        .division-title{
          height: 48px;
          line-height: 48px;
          font-weight: 700;
          font-size: 16px;
          .division-reload{
            cursor: pointer;
            font-weight: bold;
            margin-left: 20px;
            &:hover{
              color: #0077aa;
            }
            &:active{
              color: #a01820;
            }
          }
        }
        :deep(main.ant-layout-content){
          height: calc(100% - 48px);
          .content-tree{
            position: relative;
            height: 100%!important;
            width: 100%!important;
            overflow: auto;
            background: #FFFFFF;
            padding: 12px 8px;
          }
        }
      }
      .division-table-content{
        height: 100%;
        overflow-y: hidden;
      }
    }
  }
</style>
